<div class="builder-cta">
	<h2 id="ckeditor-5-builder">CKEditor&nbsp;5 Builder</h2>

	<p>
		In our interactive Builder you can quickly get a taste of CKEditor&nbsp;5. It offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select:
	</p>

	<ul>
		<li>The editor type.</li>
		<li>The features you need.</li>
		<li>Preferred framework (React, Angular, Vue or Vanilla JS).</li>
		<li>Preferred distribution method.</li>
	</ul>

	<p>At the end you get ready-to-use code tailored to your needs!</p>

	<p>
		<a href="https://ckeditor.com/ckeditor-5/builder?redirect=docs" target="_blank">Check out our interactive Builder</a>
	</p>
</div>

<style>
	.builder-cta {
		border: 1px solid #ECE6F7;
		border-left: 4px solid #A183D9;
		padding: 24px;
		margin: 32px 0 20px;
	}

	.builder-cta h2 {
		padding-top: 0;
		border: 0;
	}

	.builder-cta ul {
		margin: 18px 24px;
	}

	.builder-cta ul li {
		list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 16" width="18" height="18" fill="none"><path fill="%236A38C1" fill-rule="evenodd" d="M11.041 14.432a.74.74 0 0 0 .24-.182l3.368-3.569a.763.763 0 0 0 .236-.246.816.816 0 0 0 .074-.678.794.794 0 0 0-.175-.297L11.28 5.75a.742.742 0 0 0-.24-.182.705.705 0 0 0-.824.162.824.824 0 0 0 .019 1.128l2.257 2.392H3.75a.75.75 0 0 0 0 1.5h8.742l-2.257 2.392a.823.823 0 0 0-.019 1.128c.071.075.155.133.247.173a.703.703 0 0 0 .578-.01Z" clip-rule="evenodd"/></svg>');
		padding-inline-start: 4px;
	}

	.builder-cta ul li+li {
		margin-top: 4px;
	}

	.builder-cta a {
		display: inline-block;
		background-color: #6A38C1;
		color: #FFFFFF;
		font-weight: bold;
		text-decoration: none;
		margin-top: 8px;
		padding: 8px 16px;
		border-radius: 6px;
	}

	.builder-cta a:hover,
	.builder-cta a:focus {
		background-color: #5C32A4;
	}

	.builder-cta a::after {
		content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" width="18" height="18" fill="none"><path fill="white" d="M8.765 14.566a.75.75 0 1 1-1.06-1.06l3.005-3.007-3.005-3.005a.75.75 0 1 1 1.06-1.06l3.55 3.55a.75.75 0 0 1-.136 1.168l-3.414 3.414Z"/></svg>');
		padding-inline-start: 4px;
	}

	.builder-cta p:last-child {
		margin-bottom: 0;
	}
</style>
